<template>
	<uni-popup ref="popup" background-color="rgba(0,0,0,0)" :mask-click="false" @change="popupChange">
		<view class="buy-poup-content">
			<view class="buy-poup-top">
				<image src="https://img.quanminyanxuan.com/excel/459ee7353e534fff8d228e40f8641f90.jpg" mode="widthFix"></image>
				<view class="info-detail">
					<view class="title line1">
						【尊贵体验】新款超纤软皮鞋尊贵绅士男士简约休闲三接三接头皮鞋
					</view>	
					<view class="now-price-wrapper">
						<text>2500</text>
						<text>积分</text>
						+128元
					</view>	
					<view class="spec-tip-text">
						<text>已选择</text>
						<text>{{specObj.spec}}{{specObj.spec2?(','+specObj.spec2):''}}</text>
					</view>
				</view>
				<view class="close-wrap" @click="close">
					<uni-icons type="close" size="30" color="#ccc"></uni-icons>
				</view>
			</view>
			<view v-if="step==1">
				<product-sku :currentData="specObj" @change="skuChangeEvent"></product-sku>
			</view>
			<view class="determine" @click="next" v-if="step==1">
				下一步
			</view>
			<sel-address v-if="step==2" @submit="submit"></sel-address>
		</view>	
	</uni-popup>
</template>

<script>
	import getSign from "@/util/getSign.js"
	export default {
		name:"product-specification",
		props:{
		},
		data() {
			return {
				step:1,				
				city:"",
				specObj:{
					spec:'颜色:黑色',
					spec2:'尺码：42'
				}
			};
		},
		computed:{
			addressObj(){
				return this.$store.state.addressObj
			}
		},
		methods:{			
			skuChangeEvent(data){
				this.specObj = Object.assign({},this.specObj,data)
			},
			submit(obj){
				console.log("地址填写无误",obj)
				// 写入地址
				this.$store.commit('setAddress',obj)
				this.$store.commit('setUserInfo',{
					openid:getSign.md5(obj.phone),
					userid:obj.phone.substring(0,3)+'******'+obj.phone.substring(obj.phone.length-2,obj.phone.length)
				})
				this.$uniGo("navigateTo",{
					url:"/pages/order/order"
				})
				// uni.navigateTo({
				// 	url:"/pages/order/order"
				// })
			},
			next(){
				if(Object.keys(this.addressObj).length>1){
					this.$uniGo("navigateTo",{
						url:"/pages/order/order"
					})
					// uni.navigateTo({
					// 	url:"/pages/order/order"
					// })
				}else{
					this.step = 2;
				}				
			},
			open(){
				this.$refs.popup.open('bottom')
			},
			close(){
				this.$refs.popup.close();
			},
			popupChange(e){
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buy-poup-content{
		width: 100%;
		padding: 30rpx 30rpx 50rpx;
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		box-sizing: border-box;
		.buy-poup-top{
			width: 100%;			
			position: relative;
			// display: flex;
			// flex-direction: column;
			box-sizing: border-box;
			// justify-content: flex-end;
			image{
				width: 230rpx;
				height: 230rpx;
				border: 1px solid rgba(0,0,0,.1);
				position: absolute;
				border-radius: 5rpx;
			}
			.title{
				font-size: $uni-font-size-base;
				font-weight: bold;
			}
			.info-detail{
				height: 230rpx;
				margin-left: 240rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				justify-content: flex-end;
				.now-price-wrapper{
					color: $theme-color;
					margin-bottom: 10rpx;
					display: flex;
					align-items: baseline;
					text{
						font-weight: bold;
						font-size:$uni-font-size-lg ;
						&:first-of-type{
							font-size: 42rpx;
						}
					}
				}
				.spec-tip-text{
					color: $uni-text-color-grey;
					text{
						margin-right: 20rpx;
					}
				}
			}
			.close-wrap{
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		
		
		.determine{
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			background-color: $theme-color;
			text-align: center;
			border-radius: 5rpx;
			font-size: $uni-font-size-base;
		}
		
		
	}
</style>